<template>
    <div>
        <div id="map" class="map" ref="oldraw"> </div>
        <el-row>
          <el-col :span="2">
              <span>几何对象类型：</span>
          </el-col>
          <el-col :span="4">
                <el-select v-model="type" placeholder="请选择类型" @change="changeType">
                    <el-option label="Point" value="Point"></el-option>
                    <el-option label="LineString" value="LineString"></el-option>
                    <el-option label="Polygon" value="Polygon"></el-option>
                    <el-option label="Circle" value="Circle"></el-option>
                    <el-option label="None" value="None"></el-option>
                </el-select>
          </el-col>
          <el-col :span="2">
              <el-button type="primary" @click="undo">Undo</el-button>
          </el-col>
          <el-col :span="4">
              <el-select v-model="saveObj" placeholder="请选择保存的图形">
                <el-option v-for="i in featuresArray" :label="i" :value="i" :key="i"></el-option>
              </el-select>
          </el-col>
          <el-col :span="2">
              <el-button type="primary" @click="save">save</el-button>
          </el-col>
        </el-row>
    </div>
</template>

<script>
import { Map, View } from "ol";
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import OSM from "ol/source/OSM";
import VectorSource from 'ol/source/Vector';
import Draw from 'ol/interaction/Draw';
import Collection from 'ol/Collection';
import GML from 'ol/format/GML';

export default{
    
    data(){
        return{
            map: {},
            type: '',
            draw: {},
            source: {},
            features: {},//features
            layers: [],// 图层
            featuresArray: [],
            saveObj:{},//将要保存的图形
        };
    },
    created(){
        // 初始化图层
        let layerWorld = new TileLayer({
            source: new OSM()
        })
        // 定义几何收集画的图
        this.features = new Collection();
        // 定义绘制
        this.source = new VectorSource({
            wrapX: false,
            features: this.features,
        });
        const layervector = new VectorLayer({
            source: this.source,
        });


        this.layers.push(layerWorld)
        this.layers.push(layervector)
    },
    mounted(){
        this.map = new Map({
            target: 'map',
            layers: this.layers,
            view: new View({
                center: [-27000000, 2700000],
                zoom: 7,
            })
        });
    },
    methods:{
        // 改变选择的类型
        changeType(){
            if(this.features.getArray().length!=0){
                // 获取坐标集
                console.log(this.features.getArray()[0].getGeometry().getCoordinates())
            }
            //先清空之前的操作
            this.map.removeInteraction(this.draw)
            console.log("当前type:"  +  this.type)
            if(this.type!='None'){
                this.draw = new Draw({
                    source: this.source,//绘制图层的元数据
                    type: this.type// 绘制的类型
                })
                // 当前地图添加绘制函数
                this.map.addInteraction(this.draw)
            }
        },
        // 取消最后一次操作
        undo(){
            this.draw.removeLastPoint()
        },
        save(){
            console.log(this.saveObj.getGeometry())
            // 转换成gml
            let gml = new GML().writePoint(this.saveObj.getGeometry())
           this.$http.post('demo/save',gml).then(e =>{
               console.log(e)
           })
        }
    }
}
</script>
  <style>
    .map {
      height: 500px;
      width: 100%;
    }
  </style>
